<script setup>
import VisualLayout from '@/components/VisualLayout.vue'
import TableCommon from '@/components/TableCommon.vue'

const tableData1 = ref([
  ['9:00', '11:00'],
  ['9:00', ''],
  ['9:00', '11:00'],
  ['9:00', '11:00'],
  ['9:00', '11:00'],
  ['9:00', '11:00'],
  ['9:00', '11:00'],
  ['9:00', '11:00'],
])

</script>
<template>
  <VisualLayout>
    <div class="grid-container">
      <div class="column1">
        <div class="eartch-box">
          <!-- <img src="../assets/image/engineer/earth.png" alt=""> -->
        </div>
        <div class="status-box">
          <img class="blink" src="../assets/image/engineer/normal.png" alt="">
          <img src="../assets/image/engineer/error.png" alt="">
        </div>
      </div>
      <div class="column2">
        <TableCommon class="table-box" tableTitle="构成" :tableData="tableData1">
          <template #tip>
            <div class="info-box">群安全在库：min 1000pcs</div>
            <div class="info-box">min 1000pcs</div>
          </template>
        </TableCommon>
        <div class="arrow-box">
          <div class="arrow-row">
            <img class="icon-arrow" src="../assets/image/icon-arrow-normal-right.png" alt="">
          </div>
        </div>
        <TableCommon class="table-box" tableTitle="组立前" :tableData="tableData1">
          <template #tip>
            <div class="info-box">群安全在库：min 1000pcs</div>
            <div class="info-box">min 1000pcs</div>
          </template>
        </TableCommon>
        <div class="arrow-box">
          <div class="arrow-row">
            <img class="icon-arrow" src="../assets/image/icon-arrow-normal-right.png" alt="">
          </div>
        </div>
        <TableCommon class="table-box" tableTitle="组立后" :tableData="tableData1">
          <template #tip>
            <div class="info-box">群安全在库：min 1000pcs</div>
            <div class="info-box">min 1000pcs</div>
          </template>
        </TableCommon>
      </div>
    </div>
  </VisualLayout>
</template>

<style lang="less" scoped>
.grid-container {
  height: 100%;
  display: flex;
  padding: 30px;
  padding-top: 0px;

  .column1 {
    width: 40%;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: url(../assets/image/engineer/earth.png) center -100px no-repeat;
    background-size: 80%;

    .eartch-box {
      width: 100%;
      flex: 1;

      img {
        height: 100%;
      }
    }

    .status-box {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
  }

  .column2 {
    display: flex;
    padding: 30px;
    width: 55%;

    .table-box {}

    .arrow-box {
      padding: 0px 5px;

      .arrow-row {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-arrow {}
    }
  }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; } 
}
 
.blink {
  animation-name: blink;
  animation-duration: 1.5s; /* 设置动画持续时间为1秒 */
  animation-iteration-count: infinite;
}
</style>
